<template>
  <div>
    <chinaEcharts :areaData="areaData" :areaItems="areaItems"></chinaEcharts>
    <fishboneDiagram :json="json" class="fishboneDiagram" />
  </div>
</template>

<script>
import chinaEcharts from "./components/ChinaEcharts";
import fishboneDiagram from "./components/fishboneDiagram"
export default {
  components: {
    chinaEcharts,
    fishboneDiagram,
  },
  data() {
    return {
      //地图数据
      areaData: [
        {
          areaName: "北京市",
          DateItems: [
            {
              title: "京东",
              value: "10",
              BgColor: '#ECBA78',
            },
            {
              title: "字节跳动",
              value: "20",
              BgColor: '#FF6965',
            },
          ],
        }, {
          areaName: "上海市",
          DateItems: [
            {
              title: "拼多多",
              value: "10",
              BgColor: '#44E1E1',
            },
          ],
        }, {
          areaName: "浙江省",
          DateItems: [
            {
              title: "阿里巴巴",
              value: "10",
              BgColor: '#2F48FF',
            },
          ],
        },
      ],
      areaItems: {
        北京市: [116.41, 40.44],
        上海市: [121.47, 31.23],
        浙江省: [118.02, 26.64],
      }

      //鱼骨图数据
      json: {
        'text': 'Incorrect Deliveries', 'size': 18, 'weight': 'Bold', 'causes': [
          {
            'text': 'Skills', 'size': 14, 'weight': 'Bold', 'causes': [
              {
                'text': 'knowledge', 'weight': 'Bold', 'causes': [
                  {
                    'text': 'procedures', 'causes': [
                      { 'text': 'documentation' }
                    ]
                  },
                  { 'text': 'products' }
                ]
              },
              { 'text': 'literacy', 'weight': 'Bold' }
            ]
          },
          {
            'text': 'Procedures', 'size': 14, 'weight': 'Bold', 'causes': [
              {
                'text': 'manual', 'weight': 'Bold', 'causes': [
                  { 'text': 'consistency' }
                ]
              },
              {
                'text': 'automated', 'weight': 'Bold', 'causes': [
                  { 'text': 'correctness' },
                  { 'text': 'reliability' }
                ]
              }
            ]
          },
          {
            'text': 'Communication', 'size': 14, 'weight': 'Bold', 'causes': [
              { 'text': 'ambiguity', 'weight': 'Bold' },
              {
                'text': 'sales staff', 'weight': 'Bold', 'causes': [
                  {
                    'text': 'order details', 'causes': [
                      { 'text': 'lack of knowledge' }
                    ]
                  }
                ]
              },
              {
                'text': 'telephone orders', 'weight': 'Bold', 'causes': [
                  { 'text': 'lack of information' }
                ]
              },
              {
                'text': 'picking slips', 'weight': 'Bold', 'causes': [
                  { 'text': 'details' },
                  { 'text': 'legibility' }
                ]
              }
            ]
          },
          {
            'text': 'Transport', 'size': 14, 'weight': 'Bold', 'causes': [
              {
                'text': 'information', 'weight': 'Bold', 'causes': [
                  { 'text': 'incorrect person' },
                  {
                    'text': 'incorrect addresses', 'causes': [
                      {
                        'text': 'customer data base', 'causes': [
                          { 'text': 'not up-to-date' },
                          { 'text': 'incorrect program' }
                        ]
                      }
                    ]
                  },
                  { 'text': 'incorrect dept' }
                ]
              },
              {
                'text': 'carriers', 'weight': 'Bold', 'causes': [
                  { 'text': 'efficiency' },
                  { 'text': 'methods' }
                ]
              }
            ]
          }
        ]
      }
    };
  },
};
</script>

<style scope>
.fishboneDiagram{
  height: 500px;
  width: 1500px;
}
</style>